/**
 * 底部导航
 * 规定 name=home：首页
 * name=sport：运动
 * name=cirlce：圈子
 * name=my：我的
 */

import "../assets/fonts/font_kok358gumca/iconfont.css";
import "../assets/fonts/font_iysuojan2xi/iconfont.css";

export const showBottomNav = (name) => {
	const nav = document.createElement("nav");
	nav.className = "nav";
	
    console.log(nav);
	nav.innerHTML = ` 
    <a  class="${name === "home" ? "active" : ""}"  href="./home.html"> 
        <span class="iconfont icon-home"></span>
        <p>首页</p>
    </a>
   
    <a  class="${name === "sport" ? "active" : ""}"  href="./run.html"> 
        <span class="iconfont icon-yundongshuju"></span>
        <p>运动</p>
    </a>
    
    <a  class="${name === "circle" ? "active" : ""} " href="./care.html"> 
        <span class="iconfont icon-quanziguanli"></span>
        <p>圈子</p>
    </a>
  
    <a  class="${name === "my" ? "active" : ""}"  href="./my.html"> 
        <span class="iconfont icon-wode-wodefensi
        "></span>
        <p>我的</p>
    </a>
    `;

    document.body.append(nav);
};

/**
*顶部导航
name=sportrun:跑步
name=sportride:骑行
name=sportcourse:课程训练
*/
export const showTopNav = (name) => {
	const nav = document.createElement("nav");
	nav.className = "topnav";
	nav.innerHTML = `
    <a class= "${name === "sportrun" ? "active" : ""}"  href="./run.html">跑步</a>
    <a ${name === "sportride" ? "active" : ""} href="./ride.html">骑行</a>
    <a  ${name === "sportcourse" ? "active" : ""} href="./course.html">课程训练</a>
    `;

	document.body.prepend(nav);
};
